<template>
  <div class="login-bg" ref="loginBg">

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" v-model="phoneNum">
        </div>
        <div class="weui-cell__ft">
          <a href="javascript:;" class="vcode-btn" :class="{active:isCodeActive}" v-show="show" @click.prevent="getVcode">获取验证码</a>
          <a href="javascript:;" class="vcode-btn" v-show="!show">{{count}}s后重发</a>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请输入验证码" v-model="vCode"/>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="password" placeholder="请输入密码" v-model="password" @input="pwdChange" @blur="pwdChange"/>
        </div>
      </div>

      <div class="weui-cell"  style="display: block;padding-top: 1.05rem">

        <div class="progress">
          <div class="progress-warn">
            请使用6~16位数字与字母组合，区分大小写
          </div>
          <div class="progress-bd">
            <span class="progress-title">密码强度</span>
            <div class="progress-box">
              <div class="progress-cell">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <vue-progress-bar style="border-radius: 4px;z-index: 1;"></vue-progress-bar>
            </div>
          </div>
          <div class="progress-text-box">
            <span class="progress-title"></span>
            <div class="progress-text">
              <span>弱</span>
              <span>中</span>
              <span>强</span>
            </div>
          </div>
        </div>

        <div class="weui-cell__bd" style="margin-top: 0.4rem">
          <input class="weui-input" type="password" placeholder="再次确认密码" v-model="repeatPassword"/>
        </div>
      </div>

      <!--<div class="weui-cell weui-cell_switch" v-if="isWX">-->
        <!--<div class="weui-cell__bd">-->
          <!--开启接受微信通知-->
          <!--<p>(您可以即时接收拍品、订单动态信息)</p>-->
        <!--</div>-->
        <!--<div class="weui-cell__ft">-->
          <!--<input class="weui-switch" type="checkbox" checked="checked" v-model="isWxNotice"/>-->
        <!--</div>-->
      <!--</div>-->


      <div class="weui-cell btn">
        <div class="weui-cell__bd">
          <a class="login_btn weui-btn weui-btn_warn" :class="{active:isRegisterActive}" href="javascript:;" @click.prevent="bindPhone">注册</a>
        </div>
      </div>

      <div class="agree">
        注册即同意<router-link :to="{name:'agreement'}">《拍拍拍钱币用户协议》</router-link>
      </div>

      <!--<div class="register">-->
        <!--<router-link :to="{name:'login'}" class="" href="javascript:;" replace>有账号，立即登录</router-link>-->
      <!--</div>-->

    </div>

  </div>
</template>

<script>
  import Axios from 'axios';
  import {ipconfig} from "../../assets/js/ipconfig";
  import {getStore,isPoneAvailable,isWeiXin,getStatusMapByKey,setUser,checkStrong} from '../../assets/js/tools.js';
  import {doLogin} from '../../assets/js/getData'
  export default {
    name: "bindPhone",
    data(){
      return {
        show:true,
        count:'',
        timer:null,
        phoneNum:'',//手机号
        password:'',//密码
        repeatPassword:'',//密码

        vCode:'',//验证码
        wxUserInfo:null,
        userId:null,

        smsKey:null,//验证码key
        eSmsCodeType:null,//验证码类型
        loginType:null,

        instance:null,
      }
    },
    created(){
      this.eSmsCodeType = getStatusMapByKey('eSmsCodeType')['register'].code;
      let wxUserInfo = getStore('wxUserInfo');
      if(wxUserInfo){
        this.wxUserInfo = JSON.parse(wxUserInfo);
        this.userId = this.wxUserInfo.user.id;
      }

      this.instance = Axios.create({
        baseURL:ipconfig.apiUrl,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        }
      })
    },
    mounted(){
      // 元素的实际高度
      let h = this.$refs.loginBg.offsetHeight;
      let h2 = document.documentElement.clientHeight; //可见区域高度
      if(h<h2){
        this.$refs.loginBg.style.height = h2+'px';
      }
    },
    computed:{
      isCodeActive(){
        if(this.phoneNum){
          return true;
        }else {
          return false;
        }
      },
      isRegisterActive(){
        if(this.phoneNum&&this.vCode&&this.password&&this.repeatPassword){
          return true;
        }else {
          return false;
        }
      }
    },
    methods:{
      // 手机号号注册
      bindPhone(){
        if(!this.isRegisterActive){
          return;
        }
        if(!isPoneAvailable(this.phoneNum)){
          Toast('请输入正确的手机号');
          return;
        }
        if(this.password.length<6){
          Toast('密码必须不少于6位');
          return;
        }
        if(this.password!=this.repeatPassword){
          Toast('两次输入的密码不一样');
          return;
        }
        if (!this.vCode) {
          Toast('请输入验证码');
          return;
        }
        if (!this.smsKey) {
          Toast('您还没有获取验证码');
          return;
        }

        let data = {};
        if (isWeiXin()) {
          data = {
            authType: 0,
            account: this.phoneNum,
            password: this.password,
            smsKey: this.smsKey,
            smsCode: this.vCode,
            loginType: 1,//修改
            userId: this.userId,
          }
        } else {
          data = {
            authType: 0,
            account: this.phoneNum,
            password: this.password,
            smsKey: this.smsKey,
            smsCode: this.vCode,
            loginType: 0,//注册
          }
        }
        //注册
        doLogin(data).then(res => {
          if(res.data.reqResult.code>0){
            setUser(res.data.data);
            this.$router.push({name: 'login',query:{formBindPhone:1,phoneNum:this.phoneNum}});
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //获取验证码
      getVcode(){
        if(!this.isCodeActive){
          Toast('请输入手机号');
          return;
        }
        if(!isPoneAvailable(this.phoneNum)){
          Toast('请输入正确的手机号');
          return;
        }
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
        this.instance.get('/api/musrUser/anyone/generateSmsCode/v1',{
          params:{
            mobileNo:this.phoneNum,
            operationType:this.eSmsCodeType,
          }
        }).then(res => {
          if(res.data.reqResult.code>0){
            let data = res.data.data;
            this.smsKey = data.smsKey;
          }else {
            Toast(res.data.reqResult.msg);
          }
        }).catch(err => {
          console.log(err);
        });
      },
      //密码强度验证
      pwdChange(){
        if (this.password==null||this.password==''){
          this.$Progress.set(0);
        }else {
          let S_level=checkStrong(this.password);
          switch(S_level) {
            case 0:
              this.$Progress.tempColor('#874545');
              this.$Progress.set(33);
              break;
            case 1:
              this.$Progress.tempColor('#874545');
              this.$Progress.set(33);
              break;
            case 2:
              this.$Progress.tempColor('#D97515');
              this.$Progress.set(66);
              break;
            default:
              this.$Progress.tempColor('#33CC00');
              this.$Progress.set(100);
          }
        }
      },

    }
  }
</script>

<style scoped>
  .login-bg{
    width: 100%;
    padding: 2.75rem 0 2.5rem 0;
    background: url("../../../static/images/login/login_bg.jpg") no-repeat;
    background-size: cover;
  }
  .weui-cells{
    padding: 0 1.9rem;
    background-color: transparent;
  }
  .weui-cells:before{
    border-top: none;
  }
  .weui-cells:after{
    border: none;
  }
  .weui-cell{
    padding: 1.3rem 0.6rem 0.65rem 0.6rem;
  }
  .weui-cell:before {
    border-top: 1px solid #666666;
    left: 0;
  }
  .weui-input{
    font-size: 0.75rem;
    color: #ffffff;
  }
  .vcode-btn{
    background-color: #874545;
    text-align: center;
    font-size: 0.5rem;
    color: #ffffff;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
  }
  .vcode-btn.active{
    background-color: #B33A3A;
  }
  /*.weui-cell_switch{*/
    /*padding-top: 15px;*/
  /*}*/
  /*.weui-cell_switch .weui-cell__bd{*/
    /*color: #cccccc;*/
  /*}*/
  /*.weui-cell_switch .weui-cell__bd p{*/
    /*color: #999999;*/
    /*font-size: 12px;*/
  /*}*/
  /*.weui-switch:checked, .weui-switch-cp__input:checked ~ .weui-switch-cp__box{*/
    /*border-color: #C50000;*/
    /*background-color: #C50000;*/
  /*}*/
  /*.weui-switch, .weui-switch-cp__box {*/
    /*width: 47px;*/
    /*height: 28px;*/
  /*}*/
  /*.weui-switch:after, .weui-switch-cp__box:after {*/
    /*width: 25px;*/
    /*height: 25px;*/
  /*}*/
  /*.weui-switch:before, .weui-switch-cp__box:before {*/
    /*width: 47px;*/
    /*height: 26px;*/
  /*}*/
  .weui-input{
    color: #ffffff;
  }
  .btn{
    padding: 1.25rem 0 1rem 0;
  }
  .login_btn{
    background-color: #874545;
    font-size: 0.75rem;
    box-shadow: 0px 2px 2px 0 rgba(0,0,0,0.4);
  }
  .login_btn.active{
    background-color: #AE1717;
  }
  .btn .login_btn.active:active{
    background-color: #AE1717;
  }
  .btn .login_btn:active{
    background-color: #874545;
    color: #ffffff;
  }
  .agree{
    font-size: 0.6rem;
    color: #C3C3C3;
    padding-left: 0.6rem;
  }
  .agree a{
    font-size: 0.6rem;
    color: #BF4C4C;
  }
  /*.register{*/
    /*text-align: right;*/
    /*padding: 0rem 0.65rem;*/
  /*}*/
  /*.register a{*/
    /*color: #C50000;*/
    /*font-size: 0.6rem;*/
  /*}*/
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999999;
    font-size: 0.7rem;
  }
</style>
